<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /*
            await
                - await必须用在一个async修饰的函数里
                - await后面可以跟promise实例或者普通数据类型
                    - 跟着promise实例：拿到promise实例成功后的数据
                    - 跟着普通数据类型: 拿到该数据
        */
        async function test1() {
            let res = await new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve('data')
                }, 1000);
            });
            console.log('test1', res);
        }
        test1();

        async function test2() {
            let res = await 1111;
            console.log('test2', res);
        }
        test2();


        // 上节课我们说到，如果async函数里return的是一个普通的数据类型，那么函数的返回值会是一个fulfilled状态的promise实例，数据为你return的东西。所以想要在函数执行后拿到数据需要通过.then, 如果这次await后面的promise实例对象是失败的，那么错误信息也可以通过.catch捕获到
        async function test3() {
            let res = await new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve('data3')
                }, 1000);
            });
            return res;
        }
        test3()
            .then(res => console.log('test3', res))
            .catch(err => console.error('test3', err))

        // 但是上面这么写显然不太简便，以为我们在test3里拿到了数据，为啥还要等他执行完了再在它外边.then.catch再搞一次呢？我们可以直接把对数据的操作写到test3里面，如果想要捕获错误，可以通过try catch
        async function test4() {
            try {
                let res = await new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve('data4')
                    }, 1000);
                });
                console.log('test4',res);
            } catch (error) {
                console.error(error);
            }
        }
        test4();
    </script>
</body>

</html>